<!-- views/404.vue -->
<template>
  <div class="container">
    <el-result icon="error" title="404 Not Found" sub-title="您访问的页面不存在或已被移除">
      <template #extra>
        <el-button type="primary" @click="goMain" round>
          <el-icon>
            <HomeFilled />
          </el-icon>
          返回首页
        </el-button>
      </template>
    </el-result>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { HomeFilled } from '@element-plus/icons-vue'

const router = useRouter()
const goMain = () => router.push('/')

// 自动跳转逻辑（可选）
import { onMounted } from 'vue'
onMounted(() => {
  setTimeout(() => {
    router.push('/')
  }, 5000) // 5秒后自动跳转
})
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
</style>
